<!--
 * @Author: your name
 * @Date: 2021-12-24 09:39:33
 * @LastEditTime: 2021-12-24 12:30:52
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \shop\src\components\user\base\profile.vue
-->
<template>
    <!-- 导航栏 -->
    <van-nav-bar title="基本资料" left-text="返回" left-arrow @click-left="back" />

    <!-- 头像 -->
    <div class="myBox" :style="{background:'url('+LoginUser.cover+')'}" style="background-size: cover;background-position:center;">
        <div class="avatar">
            <img :src="LoginUser.avatar" />
        </div>
    </div>

    <div class="clear"></div>

    <!-- 表单结构 -->
    <div class="profile">
        <van-form @submit="profile">
            <!-- 昵称 -->
            <van-field v-model="LoginUser.nickname" name="nickname" label="昵称" placeholder="请输入昵称"
                :rules="rules.nickname" />

            <!-- 邮箱 -->
            <van-field v-model="LoginUser.email" readonly name="email" label="邮箱" placeholder="请输入邮箱" />

            <!-- 密码 -->
            <van-field v-model="LoginUser.password" type="password" name="password" label="登录密码"
                placeholder="请输入登录密码" />

            <!-- 性别 -->
            <van-field name="sex" label="性别">
                <template #input>
                    <van-radio-group v-model="LoginUser.sex" direction="horizontal">
                        <van-radio name="0">保密</van-radio>
                        <van-radio name="1">男</van-radio>
                        <van-radio name="2">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>


            <!-- 地区 -->
            <van-field v-model="LoginUser.region" is-link readonly name="region" label="地区选择" placeholder="点击选择省市区"
                @click="ShowArea = true" />

            <!-- 定义弹出层 -->
            <van-popup v-model:show="ShowArea" position="bottom">
                <!-- 地区组件 -->
                <van-area :value="region" :area-list="areaList" @confirm="SelectRegion" @cancel="ShowArea = false" />
            </van-popup>

            <!-- 个人简介 -->
            <van-field v-model="LoginUser.content" rows="2" name="content" label="个人简介" type="textarea"
                placeholder="请输入个人简介" maxlength="50" show-word-limit />

            <!-- 头像 -->
            <van-field name="avatar" label="修改头像">
                <template #input>
                    <!-- 文件上传的组件 -->
                    <van-uploader v-model="avatar" :max-count="1" />
                </template>
            </van-field>

            <!-- 背景封面 -->
            <van-field name="cover" label="修改封面">
                <template #input>
                    <van-uploader v-model="cover" :max-count="1" />
                </template>
            </van-field>

            <!-- 提交 -->
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    修改资料
                </van-button>
            </div>
        </van-form>
    </div>
</template>
<script>
    import {
        areaList
    } from '@vant/area-data';
    export default {
        emits: ['toggle'],
        created() {
            this.$emit('toggle', false)
        },
        data() {
            return {
                areaList,
                LoginUser: this.$cookies.get('LoginUser'),
                rules: {
                    nickname: [{
                        required: true,
                        message: '请输入昵称'
                    }]
                },
                avatar: [{
                    url: this.$cookies.get('LoginUser').avatar
                }],
                cover: [{
                    url: this.$cookies.get('LoginUser').cover
                }],
                ShowArea: false,
            }
        },
        computed: {
            region() {
                var province = this.LoginUser.province
                var city = this.LoginUser.city
                var district = this.LoginUser.district

                var region = ''

                //判断是否有选择省份，就把省份赋值给变量
                if (province) {
                    region = province
                }

                if (city) {
                    region = city
                }

                if (district) {
                    region = district
                }

                //数据库给出来的是数值结构，将数值转换为字符串
                return region.toString()
            }
        },
        methods: {
            // 返回上一级
            back() {
                this.$router.go(-1)
            },
            // 确定选择省市区
            SelectRegion(value) {

                this.ShowArea = false;

                //将确认的结果 分别给到省市区
                let [province, city, district] = value

                var region = ''

                if (province) {

                    this.LoginUser.province = province.code

                    region += `${province.name}-`
                }

                if (city) {

                    this.LoginUser.city = city.code

                    region += `${city.name}-`
                }

                if (district) {

                    this.LoginUser.district = district.code

                    region += `${district.name}`
                }

                this.LoginUser.region = region
            },
            // 表单提交
            async profile(form) {

                //封装数据
                var data = {
                    id: this.LoginUser.id,
                    nickname: form.nickname,
                    email: form.email,
                    sex: form.sex,
                    content: form.content,
                    province: this.LoginUser.province,
                    city: this.LoginUser.city,
                    district: this.LoginUser.district,
                }

                //判断密码 有填写才追加
                if (form.password) {
                    data.password = form.password
                }

                //如果有图片就追加图片
                if (form.avatar[0].file) {
                    data.avatar = form.avatar[0].file
                }

                if (form.cover[0].file) {
                    data.cover = form.cover[0].file
                }

                var result = await this.$api.profile(data)

                if (result.code == '1') {
                    //提醒信息
                    this.$notify({
                        type: 'success',
                        message: result.msg,
                        duration: 1000,
                        onClose: () => {

                            //将cookie覆盖
                            this.$cookies.set('LoginUser', result.data)


                            //跳转会会员中心
                            this.$router.go(-1)
                        }
                    })
                } else {
                    //提醒信息
                    this.$notify({
                        message: result.msg,
                        duration: 1000,
                    })
                }

            }
        }
    }
</script>
<style>
    .profile {
        padding-bottom: 5em;
    }

    .myBox .avatar {
        width: 8em;
        height: 8em;
        margin: 0 auto;
        border-radius: 100%;
        overflow: hidden;
    }
</style>